<!-- 执行任务：选择执行机，启动任务 -->
<template>
  <el-dialog title="选择执行机" :visible.sync="visible" width="60%">
    <el-row :gutter="20" style="padding: 0 0 10px 0;">
      <el-col :span="6"><el-date-picker v-model="timing" type="datetime" :default-value="new Date()" placeholder="选择任务开始日期时间" /></el-col>
    </el-row>
    <el-table ref="agentListTable" v-loading="agentListLoading" :data="agentList" style="width: 100%;" border @row-click="clickAgentListRow" @selection-change="selectionAgentChangeHandle">
      <el-table-column type="selection" header-align="center" align="center" width="50" />
      <el-table-column prop="url" header-align="center" align="center" label="执行机" sortable />
      <el-table-column prop="status" header-align="center" align="center" label="状态" />
      <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="TODO(scope.row)">刷新</el-button>
          <el-button type="text" size="small" @click="TODO(scope.row)">状态</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="butLoadding" @click="startTask">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { execScripts } from '@/api/perf/task.js'
import { searchAll } from '@/api/perf/agent.js'
export default {
  data() {
    return {
      visible: false,
      agentList: [],
      agentListLoading: false,
      agentListSelections: [],
      timing: new Date(),
      startTaskBody: {},
      butLoadding: false
    }
  },
  methods: {
    TODO() {
      this.$message('TODO...')
    },
    init(taskId, data) {
      this.visible = true
      this.startTaskBody.taskId = taskId
      this.startTaskBody.scriptIds = data
      this.startTaskDisable = false

      // 查询执行机列表
      this.agentListLoading = true
      searchAll(1, 999999999).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.agentList = data.content
        } else {
          this.$message.error(respnose.message)
        }
        this.agentListLoading = false
      })
    },
    // 删除脚本
    removeScript() {
      this.$message('TODO...')
    },
    // 执行机多选
    selectionAgentChangeHandle(val) {
      this.agentListSelections = val
    },
    // 点击任意位置选中行
    clickAgentListRow(row) {
      this.$refs.agentListTable.toggleRowSelection(row)
    },
    // 开始执行脚本
    startTask() {
      if (this.timing === null) {
        this.$message.warning('请选择启动时间')
        return
      }
      if (this.agentListSelections === null || this.agentListSelections.length === 0) {
        this.$message.warning('请至少选择一个执行机')
        return
      }
      this.startTaskBody.timing = this.timing.getTime()
      this.startTaskBody.agentIds = this.agentListSelections.map(item => { return item.id })
      console.info(JSON.stringify(this.startTaskBody))

      this.butLoadding = true
      execScripts(this.startTaskBody).then(respnose => {
        this.butLoadding = false
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.message)
          this.visible = false
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    // 模态框关闭判断
    handleClose(done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    }
  }
}
</script>

<style>
</style>
